var pageNow = 1, pageSize = 3, pageCount = 0; // pageCount,总页数
var tableData = [];  // 存储表格的数组
var modifyUserId = ''; //修改用户时，存储用户ID。
// 给添加用户按钮，绑定事件
$(".addUser").click(function () {
  $("#modalAddUser").modal('show')
})
// 给模态框中的创建按钮，绑定事件
$("#addUserBtn").click(function () {
  // 有文件上传，就只能使用POST请求
  let uacessno = $("#uacessno").val();
  let uname = $("#nickname").val();
  let password = $("#password").val();
  let usex = $("input[name=usex]:checked").val();
  // console.log(usex)
  let tel = $("#tel").val();
  let sid = $("#sid").val();
  let photo = $("#customFile").get(0).files[0];
  // console.log(photo)


  // ....正则表单验证（略）

  // 有文件上传，通过FormData对象，把参数封装在一个实例化对象中。
  let myFormData = new FormData();

  myFormData.append("uaccess", uacessno);
  myFormData.append("uname", uname);
  myFormData.append("upassword", password);
  myFormData.append("usex", usex);
  myFormData.append("usid", sid);
  myFormData.append("utel", tel);
  myFormData.append("uphoto", photo);

  // console.log(myFormData)  // FormData {},看不见添加的key的值。只能通过get(key)来查看值
  // console.log(myFormData.get("uaccess"));

  $.ajax({
    url: "/user/add",
    type: 'post',
    data: myFormData,
    // 只有文件上传时，才这样配置2个false.
    contentType: false, // 不使用"application/x-www-form-urlencoded"，根据参数，自动选择编码。如”multipart/form-data"
    processData: false,  // 不把{}参数序列化成key=value&key=value这样的字符串。
    success(res) {
      console.log(res)
      if (res.code === 0) {
        alert(res.msg)
        $("#modalAddUser").modal('hide')
      } else if (res.code === 4002) {
        location.href = "/index.html"
      }
    }
  })



});

// 页面加载完成后，获取一页用户列表数据
// 等html,css,js,图片等所有资源加载完成后，才执行。
// window.onload = function(){
//   console.log("window.onload ")
// }
// 当文件加载完成 就执行，只需要等HTML加载完成 ，就执行
// $(document).ready(function(){
//   console.log("$.ready")
// })

// 获取一页数据的函数：
const getPageData = function () {

  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let res = JSON.parse(xhr.responseText)
      if (res.code === 0) {
        console.log(res) // [{},{},{}]
        if (res.data.length === 0) {
          $("#noData").removeClass('d-none');
          $("#mypage").addClass('d-none');
        } else {
          // 如果有数据，就渲染表格
          tableData = res.data;
          let data = res.data;
          let myTbody = $("#userTbody")
          myTbody.html('')
          data.forEach((item, index) => {
            myTbody.append(` <tr data-id=${item.uid}>
            <td>
              <input type="checkbox">
            </td>
            <td>${item.uaccess}</td>
            <td>${item.uname}</td>
            <td>
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input user-state" id="customSwitch${index}" ${item.ustate === '1' ? 'checked' : ''}>
                <label class="custom-control-label" for="customSwitch${index}">${item.ustate === '1' ? '启用' : '禁用'}</label>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-link   text-info btn-roles">角色选择</button>
             <!-- <button type="button" class="btn btn-link   text-warning btn-access">权限设置</button> -->
              <button type="button" class="btn btn-link   text-danger btn-delete">删除</button>
              <button type="button" class="btn btn-link   text-primary btn-modify">修改</button>
            </td>
          </tr>`)
          });
          // 渲染分页
          pageCount = Math.ceil(res.count / pageSize); //修改总页数
          if (pageCount === 1) {
            $("#mypage").addClass('d-none'); // 不显示分页
          } else {
            $("#mypage").removeClass('d-none'); // 显示分页的DIV,
            // 再渲染分页中的li标签
            $("#userPagination").html('');
            for (let i = 1; i <= pageCount; i++) {
              $("#userPagination").append(`<li class="page-item ${i === pageNow ? 'active' : ''}"><a class="page-link" href="#">${i}</a></li>`);
            }
          }
        }
      } else {
        console.log(res.msg)
      }
    }

  }
  xhr.open('get', `/user/getAll?pageNow=${pageNow}&pageSize=${pageSize}`, false);
  xhr.send()
};

$(document).ready(getPageData);



// 给分页页码，做事件委托， 不要在动态渲染的函数中，做事件委托，避免多次事件的绑定。
$(document).on('click', '.page-link', function () {
  let event = arguments[0] || window.event;
  event.preventDefault();    // 阻止默认行为。 
  console.log(this)
  pageNow = Number($(this).text())
  getPageData() // 这个函数中，就没有参数，拿的是全局变量。
})

// 给用户状态的修改做事件委托
$(document).on("change", ".user-state", function () {
  let that = this; // 获取当前事件发生的DOM节点对象-input节点，赋值给THAT,方便在AJAX的回调函数中，拿这个节点。
  let inputState = this.checked; //获取INPUT的选中状态
  let uid = $(this).parents('tr').attr('data-id')
  // console.log(inputState); // true/ false
  inputState = inputState === true ? "1" : "2"  //把状态改变成数据库对应的数据。
  $.ajax({
    url: "/user/modifyState",
    type: "post",
    data: { "ustate": inputState, "uid": uid },
    success(res) {
      console.log(res)
      if (res.code === 0) {
        // 如果成功了，就把INPUT输入框，设置了选中状态，把文本修改为“启用”
        if (inputState === '1') {
          $(that).next().text('启用')
        } else {
          $(that).next().text('禁用')
        }
      } else {
        if (inputState === '1') // 对应 的是checked = True
          that.checked = false;
        else
          that.checked = true;
      }
    }
  })
})
// 给修改按钮做事件委托
$(document).on("click", ".btn-modify", function () {
  console.log("modify")
  // 1. 拿用户ID
  modifyUserId = $(this).parents('tr').attr('data-id');
  console.log(modifyUserId)
  // 2. 显示模态框(如果没有，就添加模态框代码 )
  $("#modalModifyUser").modal("show")

  // 3. 根据ID，获取到用户对象信息，去设置框框中的表单的值；
  let userinfo = {};
  tableData.forEach(item => {
    if (Number(modifyUserId) === item.uid) {
      console.log(item)
      userinfo = item;
    }
  });

  // 4.修改。。。。
  $("#uacessno2").val(userinfo.uaccess);
  $("#nickname2").val(userinfo.uname);
  $("#password2").val(userinfo.upassword);
  if (userinfo.usex === '男') {
    $("#sex3").get(0).checked = true;
  } else {
    $("#sex4").get(0).checked = true;

  }
  $("#tel2").val(userinfo.utel);
  $("#sid2").val(userinfo.usid);
  if (userinfo.uphoto !== null) {
    $("#userModifyPhoto").attr('src', '/uploads/' + userinfo.uphoto);
  }

  // 5. 点修改或者保存保存时，要触发一个单击事件，这个事件有没有绑定？没有绑定，只需要在全局绑定一次，不要弹出模态框时才进行绑定。

  // 6. 在事件函数中，发起后台的修改接口的调用 。先拿表单值，再调用接口
  // 7.调用成功时，隐藏模态框。
  // 8. 重新请求一页数据，成功 后重新渲染表格。

});

//确认 修改用户信息
$("#modifyUserBtn").on('click', function () {
  // console.log("#modifyUserBtn");
  // 修改时，要重新获取表单的值
  let userinfo = {};
  userinfo.uid = Number(modifyUserId);
  userinfo.uaccess = $("#uacessno2").val();
  userinfo.uname = $("#nickname2").val();
  userinfo.upassword = $("#password2").val();
  userinfo.usex = $(".modify-sex:checked").val();
  userinfo.utel = $("#tel2").val();
  userinfo.usid = $("#sid2").val();
  // console.log($("#customFile2").get(0).files[0]  ) // 没有选择文件，打出undefined, 反之是一个File {}
  if ($("#customFile2").get(0).files[0] === undefined) {
    userinfo.uphoto = '';
  } else {
    userinfo.uphoto = $("#customFile2").get(0).files[0];
  }

  // console.log(userinfo)
  // 思考：有文件上传： post + formData
  // 如果有<form></form>标签，可以给FormData（）传一个表单DOM节点对象 ，它可以直接把表单中所有的表单元素，自动添加到formData对象中去。通过get(表单域的Name属性的值)可以到值。就省略了append()的过程。

  // let formData = new FormData(document.userInfoForm2)
  // console.log(formData.get('uacessno2'))

  // 每一个单独添加
  let formData = new FormData();
  formData.append('uid', userinfo.uid);
  formData.append('uaccess', userinfo.uaccess);
  formData.append('upassword', userinfo.upassword);
  formData.append('uname', userinfo.uname);
  formData.append('usex', userinfo.usex);
  formData.append('utel', $("#tel2").val());
  formData.append('usid', userinfo.usid);
  formData.append('uphoto', userinfo.uphoto);
  formData.append('ustate', '1')  // 用户装，默认设置为1.

  // console.log(formData.get('uphoto'))

  // 调用后台接口
  $.ajax({
    url: '/user/modifyUserInfo',
    type: 'post',
    data: formData,  //有文件对象时，不能序列化成字符串
    contentType: false, // 不使用application/x-www-form/urlencoded 编码。
    processData: false, // 不把参数序列化成字符串
    success(res) {
      console.log(res)
      if (res.code === 0) {
        $("#modalModifyUser").modal("hide");
        getPageData();//重新渲染表格的一页数据，

      } else {
        alert(res.msg)
      }
    }
  })

})

// 给删除按钮做事件委托
$(document).on("click", ".btn-delete", function () {
  console.log("delete")
  let that = this;
  let uid = $(this).parents('tr').attr('data-id'); // 用户ID
  // console.log($(this).parents('tr').children().eq(0).children().first())
  let iptState = $(this).parents('tr').children().eq(0).children().first().get(0).checked; //获取左边多选框的选中状态
  if (iptState === true) {
    // alert('可以删除')
    $.ajax({
      url: '/user/delete',
      type: 'post',
      data: { uid },
      success(res) {
        console.log(res)
        if (res.code === 0) {
          alert('删除成功')
          getPageData() //重新请求一页数据回来渲染表格
        } else {
          alert(res.msg)
        }
      }
    })
  } else {
    alert('不可删除，请先选中左边框框')
  }

})

// 获取角色列表的AJAX请求的 函数。
const getRoles = async function () {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '/roles/getAll',
      type: 'get',
      success(res) {
        console.log(res)
        if (res.code === 0) {
          resolve(res.data)  // 成功时，把状态的值设置为角色列表的数据
        } else {
          reject(res.msg)
        }
      }
    })
  })
};

// 获取用户已分配角色的ajax请求函数
const getUserRoles = function (uid) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: "/user/getRoles",
      type: 'post',
      data: { uid },
      success(res) {
        if (res.code === 0) {
          resolve(res.data)
        } else {
          reject(res.msg)
        }
      }
    })
  });
}
// 给角色选择 '.btn-roles' 添加事件,
$(document).on('click', ".btn-roles", async function () {
  // 1 显示模态框
  $("#modalUserSelectRole").modal('show');
  // 2 获取当前操作用户的ID号，设置到框框的提交按钮上，同时设置用户帐号到模态框的账号栏。
  let uid = $(this).parents('tr').attr('data-id');
  uid = Number(uid);
  tableData.forEach(item => {
    if (item.uid === uid) {
      $("#setUserRoleBtn").attr('data-id', uid);
      $("#userName1").val(item.uaccess)
    }
  });

  let roleList = await getRoles();  // 等待getRoles()中的AJAX响应回来数据，并返回一个Promise的resolve()结果；
  let userRolesList = await getUserRoles(uid);  //通过AJAX, 获取用户分配的角色列表数组。
  $("#rolesTable").html('')
  // console.log(roleList) // [{…}, {…}, {…}, {…}],就是resolve()返回的结果
  // console.log(userRolesList)  //[{…}, {…}]
  let textArr = []//临时存储已分配的角色的名称
  roleList.forEach(item => {
    $("#rolesTable").append(`<tr>
                                  <td><input type="checkbox" value="${item.rid}" ${checkRoles(item.rid, userRolesList) ? "checked" : ""}></td>
                                  <td>${item.rname}</td>
                                  <td>${item.rdes}</td>
                                </tr>`);
    //通过调用checkRolesGetRoleName函数， 获取已分配的角色的名称，
    let rname = checkRolesGetRoleName(item, userRolesList);// 如果当前角色与已分配角色列表中数据有相同的，就返回一个角色的名称，没有就返回"".
    if (rname !== "") { // 判断有没有角色返回，返回了就添加到数组中。
      textArr.push(rname);
    }
  });
  // console.log("-----",textArr)
  $("#selectRoles2").val(textArr.join(',')); // 更新输入框中已分配角色的名称

});

// // 给.btn-roles添加事件
// $(document).on('click', ".btn-roles", function () {
//   // 1 显示模态框
//   $("#modalUserSelectRole").modal('show');
//   // 2 获取当前操作用户的ID号，设置到框框的提交按钮上，同时设置用户帐号到模态框的账号栏。
//   let uid = $(this).parents('tr').attr('data-id');
//   uid = Number(uid);
//   tableData.forEach(item => {
//     if (item.uid === uid) {
//       $("#setUserRoleBtn").attr('data-id', uid);
//       $("#userName1").val(item.uaccess)
//     }
//   });

//   // 3 请求后台，获取所有的角色列表的数据
//   new Promise((resolve, reject) => {
//     $.ajax({
//       url: '/roles/getAll',
//       type: 'get',
//       success(res) {
//         console.log(res)
//         if (res.code === 0) {
//           // let roleList = res.data;
//           resolve(res.data)  // 成功时，把状态的值设置为角色列表的数据
//         } else {
//           reject(res.msg)
//         }
//       }
//     })
//   })
//     .then((roleList) => {
//       // 获取用户已经分配 的角色的列表数据
//       return new Promise((resolve, reject) => {
//         $.ajax({
//           url: "/user/getRoles",
//           type: 'post',
//           data: { uid },
//           success(res) {
//             if (res.code === 0) {
//               resolve({ roleList, userRolesList: res.data })
//             } else {
//               reject(res.msg)
//             }
//           }
//         })
//       });

//     })
//     .then((result) => {
//       let { roleList, userRolesList } = result;
//       $("#rolesTable").html('')
//       let textArr = []//临时存储已分配的角色的名称
//       roleList.forEach(item => {
//         $("#rolesTable").append(`<tr>
//                                       <td><input type="checkbox" value="${item.rid}" ${checkRoles(item.rid, userRolesList) ? "checked" : ""}></td>
//                                       <td>${item.rname}</td>
//                                       <td>${item.rdes}</td>
//                                     </tr>`);
//         //通过调用checkRolesGetRoleName函数， 获取已分配的角色的名称，
//         let rname = checkRolesGetRoleName(item, userRolesList);// 如果当前角色与已分配角色列表中数据有相同的，就返回一个角色的名称，没有就返回"".
//         if (rname !== "") { // 判断有没有角色返回，返回了就添加到数组中。
//           textArr.push(rname);
//         }
//       });
//       // console.log("-----",textArr)
//       $("#selectRoles2").val(textArr.join(',')); // 更新输入框中已分配角色的名称

//     })
//     .catch(errResult => {
//       alert(errResult)
//     })

// // Promise.all(new Promise(), new Promise()).then().catch()

//   // $.ajax({
//   //   url: '/roles/getAll',
//   //   type: 'get',
//   //   success(res) {
//   //     console.log(res)
//   //     if (res.code === 0) {
//   //       let roleList = res.data;

//   //       // $("#rolesTable")
//   //       // $("#rolesTable").html('')
//   //       // roleList.forEach(item => {
//   //       //   $("#rolesTable").append(`<tr>
//   //       //   <td><input type="checkbox" value="${item.rid}"></td>
//   //       //   <td>${item.rname}</td>
//   //       //   <td>${item.rdes}</td>
//   //       // </tr>`)
//   //       // })

//   //       // 设置已选中角色输入框中的内容；
//   //       $("#selectRoles2").val('');

//   //       $.ajax({
//   //         url: "/user/getRoles",
//   //         type: 'post',
//   //         data: { uid },
//   //         success(res) {
//   //           if (res.code === 0) {
//   //             let data1 = res.data;  // [{rid:1},{rid:2}]
//   //             $("#rolesTable").html('')
//   //             let textArr = []//临时存储已分配的角色的名称
//   //             roleList.forEach(item => {
//   //               $("#rolesTable").append(`<tr>
//   //                                     <td><input type="checkbox" value="${item.rid}" ${checkRoles(item.rid, data1) ? "checked" : ""}></td>
//   //                                     <td>${item.rname}</td>
//   //                                     <td>${item.rdes}</td>
//   //                                   </tr>`);
//   //               //通过调用checkRolesGetRoleName函数， 获取已分配的角色的名称，
//   //               let rname = checkRolesGetRoleName(item, data1);// 如果当前角色与已分配角色列表中数据有相同的，就返回一个角色的名称，没有就返回"".
//   //               if (rname !== "") { // 判断有没有角色返回，返回了就添加到数组中。
//   //                 textArr.push(rname);
//   //               }
//   //             });
//   //             // console.log("-----",textArr)
//   //             $("#selectRoles2").val(textArr.join(',')); // 更新输入框中已分配角色的名称


//   //           } else {
//   //             alert(res.msg)
//   //           }

//   //         }
//   //       })
//   //     } else {
//   //       alert(res.msg)
//   //     }
//   //   }
//   // })
// });
// 在选择角色的模态框中，给角色列表做事件委托
$("#rolesTable").on('change', "input", function () {
  // 1 获取所有选中的角色
  let textArr = [] //存储所有选择的角色的名称
  // 2.拿所有选中的角色
  $("#rolesTable input:checked").each((index, item) => {
    // console.log(item)
    textArr.push($(item).parent().next().text())
  })
  // console.log(textArr)
  //3 设置选中的文本到输入框中
  $("#selectRoles2").val(textArr.join(','))
});


//给用户在模态框中设置角色时，在提交按钮上绑定一个事件。
$("#setUserRoleBtn").on('click', function () {
  let uid = Number($(this).attr('data-id'));
  let ridArr = [];
  $("#rolesTable input:checked").each((index, item) => {
    ridArr.push($(item).val())
  });
  if (ridArr.length === 0) {
    $("#modalUserSelectRole").modal('hide')
    return; //不做后台请求；
  }
  $.ajax({
    url: "/user/addRoles",
    type: 'post',
    data: { "uid": uid, "ridList": ridArr },
    success(res) {
      console.log(res);
      if (res.code === 0) {
        $("#modalUserSelectRole").modal('hide')
      } else {
        alert(res.msg)
      }
    }
  })

});

// 在渲染用户的角色列表时，检查当前用户是否包含某个角色。设置角色列表中，已选中的效果。
function checkRoles(rid, userRoles) {
  let flag = false;//默认标志变量，false,表示没有匹配的角角ID。
  for (let i = 0; i < userRoles.length; i++) {
    if (rid === userRoles[i].rid) {
      flag = true;
      break;
    }
  }
  return flag;
}

// 查找已给用户分配角色的角色名称
function checkRolesGetRoleName(obj, userRoles) {
  let rName = ''
  for (let i = 0; i < userRoles.length; i++) {
    if (obj.rid === userRoles[i].rid) {
      rName = obj.rname;
      break;
    }
  }
  return rName;
}


// 搜索账号或用户

$("#searchBtn").on('click', function () {
  let val = $("#search").val();
  if (val.trim().length === 0) return;

  new Promise((resolve, reject) => {
    $.ajax({
      url: '/user/search',
      type: 'post',
      data: { "text": val },
      success(res) {
        if (res.code === 0) {
          resolve(res.data)
        } else {
          reject(res.msg)
        }
      }
    })
  })
    .then(result => {
      console.log("result===",result)
      if(result.length === 0){
        alert('没有搜索到结果')
        return;
      }
      let myTbody = $("#userTbody")
      myTbody.html('')
      result.forEach((item, index) => {
        myTbody.append(` <tr data-id=${item.uid}>
            <td>
              <input type="checkbox">
            </td>
            <td>${item.uaccess}</td>
            <td>${item.uname}</td>
            <td>
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input user-state" id="customSwitch${index}" ${item.ustate === '1' ? 'checked' : ''}>
                <label class="custom-control-label" for="customSwitch${index}">${item.ustate === '1' ? '启用' : '禁用'}</label>
              </div>
            </td>
            <td>
              <button type="button" class="btn btn-link   text-info btn-roles">角色选择</button>
             <!-- <button type="button" class="btn btn-link   text-warning btn-access">权限设置</button> -->
              <button type="button" class="btn btn-link   text-danger btn-delete">删除</button>
              <button type="button" class="btn btn-link   text-primary btn-modify">修改</button>
            </td>
          </tr>`);
      });
    })
    .catch(err => {
      alert(err)
    })

})